<template>
	<div style="margin: 0 15px">
		<el-row type="flex" justify="space-between">
			<el-col :span="15">
				<common-card>
					<template #header>
						<div style="font-family: Roboto-Thin; padding: 20px; color: #fff">
							<span style="font-size: 20px; display: inline-block; width: 100%">User Calendar</span>
							<span style="font-size: 14px; display: inline-block; width: 100%; margin-top: 10px">Show the calendar</span>
						</div>
					</template>
					<template #main>
						<div style="display: flex; justify-content: center; align-items: center;min-height: 500px; text-align: center">
							<el-calendar v-model="date"/>
						</div>
					</template>
					<template #footer>
						<div style="text-align: end">
							<el-button class="btn" @click="date = new Date()">BACK TOADY</el-button>
						</div>
					</template>
				</common-card>
			</el-col>
			<el-col :span="8">
				<user-card :username="username" :role="role"/>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import UserCard from '../../components/Cards/UserCard'
	import CommonCard from '../../components/Cards/CommonCard'

  export default {
    name: 'index',
		data() {
      return {
        date: new Date(),
			}
		},
		components: {
      UserCard,
      CommonCard
		},
    computed: {
      username () {
        return this.$store.getters.username
      },
      role () {
        return this.$store.getters.role
      }
    },
  }
</script>

<style scoped lang="scss">
	$color: #4daf50;
	.btn {
		background-color: $color;
		color: #fff;
	}
	.Profile {
		font-size: 18px;
		color: rgba(0, 0, 0, .87);
		font-family: Roboto-Thin;
		margin: 15px;
	}
</style>